<template>
  <van-popup
    :show="show"
    position="bottom"
    :style="{ height: '100%', overflow: 'hidden' }"
    closeable
    :close-icon="iconClose"
    @close="beforeClose"
  >
    <div class="detail-container">
      <div class="title">{{ data.title }}</div>
      <div class="info">
        <div class="time">{{ data.time }}</div>
        <div class="source">来源: {{ data.source }}</div>
      </div>
      <div class="detail-content">
        <div v-html="data.detail"></div>
      </div>
    </div>
  </van-popup>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import iconClose from '@/assets/images/closeBtn.png';

const emit = defineEmits(['update:show']);

const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  data: {
    type: Object,
    default: () => ({}),
  },
});

const beforeClose = () => {
  emit('update:show', false);
};

onMounted(() => {});
</script>

<style scoped lang="scss">
.detail-container {
  padding: 32px 0;
  .title {
    font-size: 36px;
    color: #333;
    font-weight: bold;
    margin-bottom: 32px;
    text-align: center;
  }
  .info {
    padding: 0 32px;
    display: flex;
    border-bottom: 1px solid #e5e5e5;
    padding-bottom: 16px;
    font-size: 24px;
    color: #666;
    .time {
      margin-right: 32px;
    }
  }
  .detail-content {
    font-size: 26px;
    padding: 0 32px;
    color: #444;
    line-height: 42px;
    text-indent: 2em;
    height: calc(100vh - 140px);
    overflow-y: auto;
  }
}
</style>
